<template>
    <div class="shopping">
        <div class="grow">
            <div class="pipai"> <img src="../assets/logo/2d0402ffcd52b3ec3b07422681c42a89.png" alt="">
                <span>网易自营品牌</span>
            </div>

            <div class="pipai"> <img src="../assets/logo/a03dd909803b9ac032eba58b7253a2f6.png" alt="">
                <span>30天无忧退货</span>
            </div>
            <div class="pipai"> <img src="../assets/logo/eb61ee48e8942dbd1784c9ee75ebe955.png" alt="">
                <span>48小时快速退款</span>
            </div>
        </div>

        <van-checkbox-group v-model="result" v-for="item of cartList" :key="item.id">
            <van-checkbox :disabled="Show" :name="item.id" @click="changeChecked(item)">
                <van-swipe-cell>
                <van-card :num="item.number" :price="item.market_price" :title="item.goods_name"
                    :thumb="item.list_pic_url" />
                    <van-stepper @change="stepper(item)" v-show="Show" v-model="item.number" />
                    <template #right>
                        <van-button square type="danger" @click="delate(item.product_id)" text="删除" />
                      
                      </template>
                </van-swipe-cell>
            </van-checkbox>
        </van-checkbox-group>

        <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll" :disabled="Show">全选</van-checkbox>
            <template #tip>
                累计共{{cartTotal.checkedGoodsCount}}件商品,可点 <van-button :type="Show?'danger':'primary'" size="small" @click="isShow">{{Show?'完成编辑':'编辑'}}</van-button>
                按钮进行商品数量修改
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
    import { getCarts, postcheck,postStepperDate,postDeletePru } from "../api/api"
    export default {
        name: 'YxShopping',

        data() {
            return {
                result: [],
                // 编辑按钮
                Show:false,
                //  商品数据
                cartList: [],
                // 商品总量 总价 
                cartTotal: []
            };
        },
        computed: {
            //   全选 如果result的长度 和 商品数据的长度一样 就为全选
            checkedAll: {
                get() {
                    return this.result.length == this.cartList.length;
                },
                set(val) {
                    let products_id = []
                    console.log(this.cartList)
                    this.cartList.forEach((item)=>{
                        products_id.push(item.product_id)
                    })
                    postcheck({
                        isChecked: val?1:0,
                        productIds: products_id.join()
                    }).then((res) => {
                        this.creaFn(res)
                    })

                }
            }
        },
        created() {
            getCarts().then((res) => {
                if (res.errno == 0) {
                    this.creaFn(res)
                }
            })
        },

        methods: {
            onSubmit() { },
            stepper(item){
                postStepperDate({goodsId:item.goods_id,id:item.id,number:item.number,productId:item.product_id}).then((res)=>{
                    this.creaFn(res)
                })
            },
            onClickEditAddress() { },
            isShow(){
               this.Show = !this.Show
            },
            delate(item){
              
                postDeletePru({productIds:item.toString()}).then((res)=>{
                    this.creaFn(res)
                })
            },
            creaFn(res) {
                this.cartList = res.data.cartList;
                this.cartTotal = res.data.cartTotal;
                this.result = []
                this.cartList.forEach((item) => {
                    item.checked == 1 ? this.result.push(item.id) : ""
                })
                console.log(res)
            },
            changeChecked(item) {
                if(this.Show)return;
                postcheck({
                    isChecked: item.checked == 1 ? 0 : 1,
                    productIds: item.product_id
                }).then((res) => {
                    this.creaFn(res)
                })
            }

        },
    };
</script>

<style lang="scss" scoped>
    .van-stepper{
        text-align: right;
    }
    /deep/ .van-checkbox__label {
        flex: 1;
    }

    .van-checkbox-group {
        background-color: #fff;

        .van-checkbox {
            padding: .2rem .3rem;
            border-bottom: 1px solid #ccc;
        }
    }

    .van-submit-bar {
        bottom: 1rem;
        border-bottom: 1px solid #ccc;
    }

    .grow {
        display: flex;
        height: .5rem;
        align-items: center;
        justify-content: space-around;
        background-color: #F1F1F1;

        img {
            width: .32rem;
            height: .32rem;
            transform: translateX(0.1rem);

        }

        span {
            font-size: .28rem;

        }
    }
    .van-button{
        height: 100%;
    }

</style>
